<template>
	<view class="HomePage">
		<scroll-view class="scroll" scroll-y="true" @scroll="PageScroll" lower-threshold="30"
			@scrolltolower="scrolltolower">
			<view class="bac">
				<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in bannerList" :key="index">
						<view class="swiper-item">
							<image class="image" :src="item.imgUrl" mode="heightFix"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="title" :style="{top:StatusBar+'px'}" v-if="showTitle">
					<image :src="imgUrl+'title.png'" alt="">
				</view>
				<view id="snkpTitle"></view>
				<view :style="{height:CustomBar+'px',paddingTop:StatusBar+'px'}" class="bacTitle" v-if="!showTitle"
					:class="{bacTitleYs:!showTitle}">
					<view class="">姚记潮品</view>
				</view>
			</view>
			<!-- 模糊过度 -->
			<view class="overlay"></view>
			<!-- nav栏 -->
			<view class="navbar">
				<view class="navbarTop">
					<!-- 精品商城 -->
					<view class="topImg" @click="unopen">
						<image :src="imgUrl+'shopping.png'" alt="">
					</view>
					<!-- 合作商户 -->
					<view class="topImg" @click="toShop">
						<image :src="imgUrl+'cooperation.png'" alt="">
					</view>
					<!-- 卡牌赛事 -->
					<view class="topImg" @click="unopen">
						<image :src="imgUrl+'Competition.png'" alt="">
					</view>
				</view>
				<!-- 底部按钮 -->
				<view class="navbarButtom">
					<view class="list" @click="unopen">
						<view class="img">
							<image :src="imgUrl+'trail.png'" alt="">
						</view>
						<view class="text">通顶雪道</view>
					</view>
					<view class="list" @click="toNews">
						<view class="img">
							<image :src="imgUrl+'news.png'" alt="">
						</view>
						<view class="text">公司新闻</view>
					</view>
					<view class="list" @click="unopen">
						<view class="img">
							<image :src="imgUrl+'explain.png'" alt="">
						</view>
						<view class="text">版本说明</view>
					</view>
					<view class="list" @click="unopen">
						<view class="img">
							<image :src="imgUrl+'join.png'" alt="">
						</view>
						<view class="text">加入我们</view>
					</view>
				</view>
			</view>
			<!-- 中部 -->
			<view class="middle">
				<view class="left middleBox" @click="unopen">
					<view class="btn">
						<view class="btnLeft">去查看</view>
						<view class="btnRight">
							<image :src="imgUrl+'icon2.png'" alt="">
						</view>
					</view>
				</view>
				<view class="right middleBox" @click="unopen">
					<view class="btn">
						<view class="btnLeft">去发现</view>
						<view class="btnRight">
							<image :src="imgUrl+'icon1.png'" alt="">
						</view>
					</view>
				</view>
			</view>
			<!-- 底部列表栏 -->
			<view class="list">
				<shopping-list v-for="(item,index) in GoodsList" :key="index" :listItem="item" />
			</view>
			<!-- 没有更多提示 -->
			<view class="tip" v-if="GoodsList.length===total">没有更多了 ~~ </view>
		</scroll-view>
	</view>
</template>

<script>
	import shoppingList from '@/components/shopping/shoppingList.vue'
	// import gameDetails from "@/static/lib/public.js";
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				// gameDetailsData: gameDetails,

				imgUrl: this.$http.imgUrl + '/static/HomePage/',

				// 是否显示默认标题
				showTitle: true,
				// 商品列表
				GoodsList: [],
				page: 1,
				size: 10,
				total: '',
				nbsp: '&nbsp;',
				bannerList: ''
			};
		},
		components: {
			shoppingList
		},
		created() {
			this.getData()
			this.getBanner()
		},
		onShow() {
			this.initData()
			this.getData()
			this.getBanner()
		},

		methods: {
			// 获取首页数据
			async getData() {
				const data = await this.$http.get(this.api.home.GoodsList, {
					token: uni.getStorageSync('token'),
					pageNumber: this.page,
					pageSize: this.size
				})
				const res = data.data.data

				if (!res) return
				this.total = res.totalCount
				if (this.page === 1) {
					this.GoodsList = res.data
				} else {
					this.GoodsList.push(...res.data)
				}
			},
			// 获取轮播图
			async getBanner() {
				const url = this.api.home.bannerList
				const {
					data
				} = await this.$http.get(url)
				// console.log(data, 'banner');
				this.bannerList = data.data
			},
			// 获取滚动条高度切换不同标题
			PageScroll(e) {
				const query = uni.createSelectorQuery().in(this);
				query.select('#snkpTitle').boundingClientRect(data => {
					// console.log("得到布局位置信息" + JSON.stringify(data));
					// console.log("节点离页面顶部的距离为" + data.top);
					// console.log(data.top, this.CustomBar, 33)
					if (data.top >= 0) {
						this.showTitle = true
					} else {
						this.showTitle = false
					}

				}).exec();
				return
				const scrollTop = e.detail.scrollTop // 获取当前页面滚动高度
				if (scrollTop > 44) {
					this.showTitle = false
				} else {
					this.showTitle = true
				}
			},
			// 上拉加载
			scrolltolower() {
				if (this.GoodsList.length === this.total) return
				this.page++
				this.getData()

			},
			// 去新闻页
			toNews() {
				uni.navigateTo({
					url: "/pagesA/News/index"
				})
			},
			// 去商品详情页
			toshopDetails(id) {
				uni.navigateTo({
					url: "/pagesA/HomePage/ShopDetails?id=" + id
				})
			},
			// 去合作商户
			toShop() {
				uni.getSetting({
					success(set) {
						if (set.authSetting['scope.userLocation'] === undefined || set.authSetting[
								'scope.userLocation'] === true) {
							uni.getLocation({
								type: 'gcj02',
								success: function(res) {
									uni.setStorageSync('lng', res.longitude)
									uni.setStorageSync('lat', res.latitude)
									uni.navigateTo({
										url: '/pagesA/Shop/index'
									})
									return
								},
								fail(res) {

								}
							});
						} else {
							uni.navigateTo({
								url: '/pagesA/Shop/index'
							})
						}
					}
				})
			},
			// 未开放 
			unopen() {
				uni.showToast({
					title: "暂未开放",
					duration: 2000,
					icon: "none",
				});
			},
			// 初始化
			initData() {
				this.GoodsList = []
				this.page = 1
				this.size = 10
				this.total = ''
				this.bannerList = ''
			}
		}
	};
</script>

<style lang="scss" scoped>
	.snkpTitle {
		position: absolute;
	}

	.HomePage {
		width: 100%;
		padding-bottom: 152rpx;
		position: relative;

		.scroll {
			height: 100vh;
			position: fixed;
			top: 0;
			padding-bottom: calc(120rpx + env(safe-area-inset-bottom) / 2);
			background-color: #FAFAFA;
			;
		}

		.overlay {
			position: absolute;
			top: 550rpx;
			width: 750rpx;
			height: 48rpx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FAFAFA 100%);
		}

		.bac {
			width: 750rpx;
			height: 596rpx;
			position: relative;

			.swiper {
				width: 100%;
				height: 100%;

				.swiper-item {
					width: 100%;
					height: 100%;

					.image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.title {
				position: fixed;
				width: 186rpx;
				height: 76rpx;

				left: 50%;
				transform: translateX(-50%);

				image {
					width: 100%;
					height: 100%;
				}

			}

			.bacTitle {
				// position: fixed;
				// top: 0;
				// margin-top: 88rpx;
				z-index: 999;
				width: 100%;
				height: 120rpx;
				background-color: #FFFFFF;
				color: #000;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.bacTitleYs {
				position: fixed;
				top: 0;
			}
		}

		.navbar {
			width: 702rpx;
			height: 320rpx;
			background: rgba(255, 255, 255, 0.8);
			box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(153, 153, 153, 0.12), inset 0rpx 2rpx 2rpx 0rpx #FFFFFF;
			border-radius: 16rpx;
			backdrop-filter: blur(8px);
			margin: 0 auto;
			margin-top: -58rpx;
			// margin-top: 540rpx;

			.navbarTop {
				display: flex;
				justify-content: space-evenly;
				padding-top: 24rpx;

				.topImg {
					width: 202rpx;
					height: 104rpx;
					box-shadow: inset 0rpx 2rpx 6rpx 0rpx rgba(255, 255, 255, 0.5);
					border-radius: 8rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.navbarButtom {
				display: flex;
				justify-content: space-evenly;

				.list {
					width: 80rpx;
					height: 128rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					.img {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.text {
						margin-top: 16rpx;
						width: 96rpx;
						height: 24rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
						line-height: 24rpx;
					}
				}
			}
		}

		.middle {
			width: 702rpx;
			height: 160rpx;
			margin: 0 auto;
			margin-top: 32rpx;
			display: flex;

			.middleBox {
				width: 350rpx;
				height: 160rpx;
				border-radius: 8rpx;
			}

			.left {
				background: url(https://lzmordershop.oss-cn-hangzhou.aliyuncs.com/static/HomePage/middleLeft.png) no-repeat;
				background-size: 100%;
				margin-right: 2rpx;

				.btn {
					margin-left: 24rpx;
				}
			}

			.btn {
				margin-top: 72rpx;
				width: 140rpx;
				height: 48rpx;
				background: #FFFFFF;
				border-radius: 26rpx;
				display: flex;
				align-items: center;

				.btnLeft {
					margin: 0 16rpx 0 12rpx;
					width: 72rpx;
					height: 24rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #0097FF;
					line-height: 24rpx;
				}

				.btnRight {
					width: 32rpx;
					height: 32rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.right {
				background: url(https://lzmordershop.oss-cn-hangzhou.aliyuncs.com/static/HomePage/middleRight.png) no-repeat;
				background-size: 100%;

				.btn {
					margin-left: 36rpx;

					.btnLeft {
						color: #FF4D4D;
					}
				}
			}
		}

		.list {
			width: 702rpx;
			margin: 32rpx 24rpx 0 24rpx;

			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

		}

		.tip {
			height: 60rpx;
			width: 100%;
			text-align: center;
		}


	}
</style>